<template>
    <div class="movietab">
        <ul>
            <router-link class="font-color" tag="li" to="/movie/city">
                北京 <i class="fa fa-caret-down"></i>
            </router-link>
            <router-link class="font-color" tag="li" to="/movie/now">
                正在热映
            </router-link>
            <router-link class="font-color" tag="li" to="/movie/coming">
                即将上映
            </router-link>
            <router-link tag="li" to="/movie/search">
                <i class="fa fa-search"></i>
            </router-link>
        </ul>
        <keep-alive>
            <router-view/>
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name: 'MovieTab'
    }
</script>

<style scoped>
    .movietab {
        padding-top: 50px;
    }

    /* ul {
        border-bottom: 1px solid #666;
    } */

    li {
        display: inline-block;
        width: 25%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
        border-bottom: 1px solid #999;
    }

    .font-color {
        color: #666;
    }

    .fa-search {
        font-size: 25px;
    }

    .router-link-active {
        color: #E54847;
        border-bottom: 2px solid #E54847;
    }
</style>